<template>
	<view class="root">
		<city-list v-if="bShowCities" @onPopupItemClick="onPopupItemClick" @onPopupClick='onPopupClick' :popupMenu='popupMenu'></city-list>
		<wxc-flex dir='top' style='width:100%;'>
			<wxc-flex dir='left' main='between' cross='end' box='padding' padding='34upx 40upx 24upx 40upx' style='height:158upx;width:100%;'>
				<wxc-flex dir='top' main='between' style='height:100%;width:480upx;flex-shrink: 0;'>
					<text class='font-r' style='color:#333333;font-size:28upx;line-height:28upx;'>目的地</text>
					<input placeholder='搜索酒店' cursor-spacing='30' class='font-m' style='color:#333333;font-size:40upx;line-height:40upx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
					 placeholder-style='color:#888888;' @confirm='onInputBindConfirm' @input='onInputBindInput' confirm-type='done'
					 :value='destination' type='text'></input>
				</wxc-flex>

				<wxc-flex dir='left' cross='center' @click='onPopupClick' style="margin-left:50upx;flex-shrink:0;height: auto;">
					<image style='width:20upx;height:11upx;' src="/static/img/icon_scence_more.png"></image>
					<text class='font-b' style='margin-left:17upx;font-size:34upx;color:#636363'>{{area.length>0?area:"选择市"}}</text>
				</wxc-flex>
			</wxc-flex>

			<vline height='1px' width='670upx' style='margin-left:40upx;' color='#DDDDDD'></vline>
			<wxc-flex dir='left' main='between' cross='end' box='padding' padding='43upx 90upx 17upx 90upx' style='width:100%;height:167upx;'>
				<wxc-flex dir='top' @click='onShowDatePicker(0)' data-type='in' main='between' style='height:100%;width: auto;'>
					<text class='font-r' style='color:#343434;font-size:28upx;line-height:28upx;'>入住</text>
					<text class='font-b' style='color:#333333;font-size:40upx;'>{{checkInTime}}</text>
				</wxc-flex>

				<view style='position:relative;width:64upx;height:68upx;display:flex;align-items: center;justify-content: center'>
					<text class='font-r' style='color:#323232;font-size:24upx;line-height:24upx;'>{{days}}晚</text>
					<image style='width:32upx;height:68upx;position:absolute;left:16upx;z-index:-1;' src='/static/img/bg_hotel_days.png'></image>
				</view>

				<wxc-flex dir='top' @click='onShowDatePicker(1)' data-type='out' main='between' style='height:100%;width: auto;'>
					<text class='font-r' style='color:#343434;font-size:28upx;line-height:28upx;'>离店</text>
					<text class='font-b' style='color:#333333;font-size:40upx;'>{{checkOutTime}}</text>
				</wxc-flex>
			</wxc-flex>

			<mx-date-picker :show="showPicker" type="date" :value="pickerValue" :showHoliday="false" @confirm="onDateSelected"
			 @cancel="oncancel" />

			<vline height='1px' width='670upx' style='margin-left:40upx;' color='#DDDDDD'></vline>
			<wxc-flex main='center' cross='center' @click='onSearch' class='font-r' style='margin-top:50upx;color:#FFFFFF;font-size:36upx;width:668upx;height:86upx;background:rgba(16,142,233,1);border-radius:10upx;align-self:center'>
				查找酒店
			</wxc-flex>

			<vline v-if="tuijians.length>0" height='20upx' color='#F5F5F5' style='margin-top:50upx;'></vline>
			<text v-if="tuijians.length>0" class='font-r' style='color:#333333;font-size:42upx;line-height:42upx;margin-top:40upx;margin-left:45upx;'>相关推荐</text>
			<view v-if="tuijians.length>0" style='width:100%;height:auto;margin-top:42upx;'>
				<scroll-view scroll-x class="scroll-wrap">
					<block v-for='(item,index) in tuijians' :key='index'>
						<view class="scroll-view tuijian-item" @click='onStrategyClick' :data-item='item' style='width:425upx;' :style='[{"margin-left":index==0?upx2px(45):"0px"},{"margin-right":(tuijians.length==index+1)?upx2px(45):upx2px(16)}]'>
							<wxc-flex dir="top">
								<image :src="item.strategyImg" style='width:425upx;height:283upx;'></image>
								<wxc-elip class='font-b' :line="2" style='margin-top:14upx;width:100%;color:#333333;font-size:36upx;line-height:48upx;'>
									{{item.businessIntroduce}} </wxc-elip>

								<wxc-flex class='font-r' dir='right' cross='baseline' style='margin-top:37upx;width:100%;color:#333333;font-size:24upx;'>
									{{item.browseNum}} 阅读
								</wxc-flex>
							</wxc-flex>
						</view>
					</block>
				</scroll-view>
			</view>
		</wxc-flex>
	</view>
</template>

<script>
	import wxcFlex from "@/components/custom/flex.vue"
	import vline from "@/components/custom/vline.vue"
	import wxcElip from "@/components/custom/wxc-elip.vue"
	import hldLabel from "@/components/custom/hld-label.vue"
	import hldPrice from "@/components/custom/hld-price.vue"
	import cityList from "@/components/custom/city-list.vue"
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
	export default {
		components: {
			wxcFlex,
			vline,
			wxcElip,
			hldLabel,
			cityList,
			hldPrice,
			MxDatePicker,
		},
		mounted() {
			let date = new Date()
			let y = date.getFullYear()
			let m = date.getMonth() + 1
			let d = date.getDate()

			let date2 = new Date()
			date2.setDate(date2.getDate() + 1)
			let y2 = date2.getFullYear()
			let m2 = date2.getMonth() + 1
			let d2 = date2.getDate()

			// this.date = y + '/' + m + '/' + d;
			this.inFullDate = y + '/' + (m < 10 ? ('0' + m) : m) + '/' + (d < 10 ? ('0' + d) : d)
			this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
			this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
			this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
		},
		onLoad: function(options) {
			var area = options.city ? options.city : this.pub.getLocalcity()
			this.area = area;
			
			var that = this;
			//获取城市列表
			this.popupMenu = this.pub.getCities();
			if (this.popupMenu || this.popupMenu.length == 0) {
				this.pub.getCityList(function(res) {
					that.popupMenu = that.pub.getCities()
				})
			}

			this.getData();
		},
		onShow:function(){
			//#ifdef H5
			document.title = '酒店查询'
			//#endif
		},
		data() {
			return {
				popupMenu: [],
				bShowCities: false,
				keyword: '',
				destination: '',
				area: '',
				checkInTime: '',
				checkOutTime: '',
				inFullDate: '',
				outFullDate: '',
				days: '1',
				dateType: 0, //0入住1离店
				tuijians: [],
				showPicker: false,
				pickerValue: '',
			}
		},
		computed: {

		},
		methods: {
			upx2px(udp) {
				return uni.upx2px(udp) + "px";
			},
			onStrategyClick: function(e) {
				if (this.pub.getIsPublishing()) {
					wx.showToast({
						title: '敬请期待...',
						icon: 'none'
					})
					return
				}
				this.pub.jumpToWeb(e.currentTarget.dataset.item.strategySrc)
			},
			onInputBindInput: function(e) {
				this.keyword = e.detail.value
			},
			onInputBindConfirm: function(e) {

			},
			onSearch: function(e) {
				uni.navigateTo({
					url: '/pages/hotel/hotellist?keyword=' + this.keyword + "&city=" + this.area + "&inDate=" + this.inFullDate + "&outDate=" + this.outFullDate,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			onPopupClick: function(e) {
				this.bShowCities = !this.bShowCities
			},
			onPopupItemClick: function(e) {
				console.log(e)
				this.area = e.currentTarget.dataset.name;
				this.bShowCities = false;
				this.getData();
			},
			onShowDatePicker(i) { //显示
				this.showPicker = true;
				if (i == 0) {
					this.pickerValue = this.inFullDate
				} else {
					this.pickerValue = this.outFullDate
				}
				this.dateType = i
			},
			onDateSelected(e) { //选择
				if (e) {
					let result = e.value
					if (this.dateType == 0) {
						let inDate = new Date(result)
						let outDate = new Date(this.outFullDate)
						let nowDate = new Date();
						let y0 = inDate.getFullYear()
						let m0 = inDate.getMonth() + 1
						let d0 = inDate.getDate()
						let nowFullDate = y0 + '/' + (m0 < 10 ? ('0' + m0) : m0) + '/' + (d0 < 10 ? ('0' + d0) : d0)
						
						if (result < nowFullDate) {
							uni.showToast({
								title:'入时间不能小于今天！',
								icon:"none",
								duration:3000
							})
							return false
						}
						
						let y = inDate.getFullYear()
						let m = inDate.getMonth() + 1
						let d = inDate.getDate()
						this.inFullDate = result;
						this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
						
						if (this.outFullDate <= result) {
							outDate = inDate;
							outDate.setDate(outDate.getDate()+1);
						} 
						let y2 = outDate.getFullYear()
						let m2 = outDate.getMonth() + 1
						let d2 = outDate.getDate()
						this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
						this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
					} else if (this.dateType == 1) {
						if(result<=this.inFullDate) {
							uni.showToast({
								title:'离店时间必须大于当天时间！',
								icon:"none",
								duration:3000
							})
							return
						}
						let outDate = new Date(result);
						let y2 = outDate.getFullYear()
						let m2 = outDate.getMonth() + 1
						let d2 = outDate.getDate()
						this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
						this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
					}
					
					let days = new Date(this.outFullDate).getTime() - new Date(this.inFullDate).getTime();
					this.days = parseInt(days / (1000 * 60 * 60 * 24))
					this.showPicker = false;
				}
			},
			oncancel() {
				this.showPicker = false;
			},
			getData(){
				let that = this;
				//获取第一页 12条数据
				this.$postApi(this.$path.GET_STRATEGY_LIST, {
					strategyId: '',
					strategyName: '',
					strategyType: "3",
					descType: "1",
					addressCity: this.area,
					page: "1",
					rows: "12"
				}).then(res => {
					let data = res.data;
					if (data.success) {
						that.tuijians = data.rows;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.root {
		width: 100%;
	}
</style>
